<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no" />
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body{
			background: #888888;
		}
		#iphone5s {
			margin: 100px auto;
			width: 369px;
			height: 794px;
			background: #fafbfd;
			position: relative;
			border-radius: 60px;
			border: 8px solid #ebdcc7;
			box-shadow: inset 0 0 1px 1px #ccc;
		}
		
		.screen {
			/*content: "";*/
			width: 327px;
			height: 580px;
			background: #999;
			position: absolute;
			top: 13%;
			left: 4%;
			border-radius: 5px;
			border: 5px solid #888888;
			text-align: right;
			line-height: 1100px;
			font-size: 20px;
			font-weight: 900;
		}
		
		.listen {
			/*content: "";*/	
			position: absolute;
			bottom: 2%;
			left: 40%;
			width: 70px;
			height: 70px;
			border: 1px solid #CCCCCC;
			border-radius: 50%;
			box-shadow: inset 2px -2px 2px #ede7db, 
			inset 4px -2px 2px #ede7db,
			inset -2px 2px 2px #ede7db,
			inset -2px -2px 2px #b9aa95,
			inset 4px 2px 2px #b9aa95,
			inset 2px -2px 2px #b9aa95;
		}
		.camera{
			position: absolute;
			width:5px;
			height: 5px;
			background: #3a79a4;
			border: 5px solid #43484c;
			border-radius: 50%;
			top: 3%;
			left: 48%;
		}
		.camera:before{
			content: "";
			width: 65px;
			height: 8px;
			border-radius: 6px;
			position: absolute;
			top: 550%;
			left: -550%;
			background: #383838;
		}
		.camera:after{
			content: "";
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: #383838;
			position: absolute;
			top: 550%;
			left: -1000%;

		}
		#iphone5s:after{
			content: "";
			width: 63px;
			height: 8px;
			position: absolute;
			top: -1.5%;
			right: 15%;
			background: #ebdcc7;
			border: 5px solid #d2c3ae;
			border-radius: 8px;
			border-bottom: none;
			border-left: transparent;
			border-right: transparent;
		}
		#iphone5s:before{
			width: 2px;
			height: 40px;
			content: "";
			position: absolute;
			top: 13%;
			left: -3.5%;
			border-left:6px solid #d2c3ae ;
			border-radius: 5px;
		}
		.listen:before{
			content: "";
			width: 2px;
			height: 30px;
			content: "";
			position: absolute;
			top: -758%;
			left: -233%;
			border-left:6px solid #d2c3ae ;
			border-radius: 5px;	
		}
		.listen:after{
			content: "";
			width: 2px;
			height: 30px;
			content: "";
			position: absolute;
			top: -660%;
			left: -233%;
			border-left:6px solid #d2c3ae ;
			border-radius: 5px;	
		}
		.whiteside{
			width: 9px;
			height: 6px;
			position: absolute;
			background: #fafbfd;
			top: 7.5%;
			box-shadow: inset 0 0 1px 0 #ccc; 
			left: -2.2%;
		}
		.whiteside:before{
			content: "";
			width: 9px;
			height: 6px;
			position: absolute;
			background: #fafbfd;
			top: 7.5%;
			box-shadow: inset 0 0 1px 0 #ccc; 
			left: 4181%;
		}
	</style>

	<body>
		<div id="iphone5s">
			<div class="screen">
				你好丶我姓宋
			</div>
			<div class="camera">
			</div>
			<div class="listen">
			</div>
			<div class="whiteside">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var obody = document.getElementsByTagName('body')[0];
		obody.style.zoom='62%';
	</script>

</html>